<template>
	<div class="containerring" id="circle" :style="{'background': color,'width':handleSize,'height':handleSize}"> 
		　　<div class="leftring">
			<div class="left" :style="{'background': ringtrackcolor,'border-radius':handRadius('l'), 'transform':`${renderLeft()}`}"></div>
		</div>
		<div class="rightring">
			<div class="right" :style="{'background': ringtrackcolor,'border-radius':handRadius('r'),'transform':`${renderRight()}`}"></div>
		</div>
		<div class="proportion" :style="{'width':mw,'height':mw}">{{rotate}}%</div>
	</div>
</template>
<script>
	export default {
		name: "lj-chart",
		props: {
			color: { //环状图颜色
				type: String,
				default: '#0f3bff'
			},
			diameter: { //进度条宽度
				type: Number,
				default: 40
			},
			ringtrackcolor: { //环状图轨道颜色
				type: String,
				default: '#e9ecef'
			},
			rotate: {
				type: String | Number,
				default: 0
			},
			size: { //容器大小
				type: Number,
				default: 200
			},
		},
		
		data() {
			return {
				getBoxW: null
			};
		},
		computed: {
			mw() {
				const makeW = `${this.getBoxW?.width - this.diameter}px`
				return makeW
			},
			handleSize(){
				const hSize = `${this.size}px`
				return hSize
			},
			
		},
		methods: {
			async init() {
				this.getBoxW = await this.getBox()
				console.log(this.getBoxW)
			},
			async getBox() {
				let obj = null
				return new Promise(resolve => {
					const query = uni.createSelectorQuery().in(this);
					query.select(`#circle`).boundingClientRect(data => {
						obj = data
					}).exec(() => {
						resolve(obj);
					});
				})
			},
			handRadius(type){
				let htm = ``
				const bSize = `${this.size/2}px`
				if(type == 'l'){
					htm = `${bSize} 0 0 ${bSize}`
				}else{
					htm = `0 ${bSize} ${bSize} 0`
				}
				return htm
			},
			renderLeft() {
				let rotateNum = this.rotate * 3.6;
				console.log(rotateNum)
				if (rotateNum <= 180) {
					return `rotate(${0}deg)`
				} else {
					return `rotate(${(rotateNum-180 > 180 ? 180 : rotateNum-180)}deg)`
				}
			},
			renderRight() {
				let rotateNum = this.rotate * 3.6;
				if (rotateNum <= 180) {
					return `rotate(${rotateNum}deg)`
				} else {
					return `rotate(${180}deg)`
				}

			},
		},
		mounted() {
			this.init()
		}
	}
</script>

<style lang="scss">
	.containerring {
		width: 110px;
		height: 110px;
		position: relative;
		border-radius: 50%;
		.leftring {
			width: 50.6%;
			height: 100%;
			margin: 0px;
			position: absolute;
			left: -0.4%;
			top: 0;
			overflow: hidden;
		}

		.rightring {
			width: 50.6%;
			height: 100%;
			margin: 0px;
			position: absolute;
			right: -0.4%;
			top: 0;
			overflow: hidden;
		}
		.left {
			width: 100%;
			height: 100%;
			border-radius: 55px 0 0 55px;
			// background: #EBEEF5;
			transform-origin: right center;
		}
		
		.right {
			width: 100%;
			height: 100%;
			border-radius: 0 55px 55px 0;
			// background: #EBEEF5;
			transform-origin: left center;
		}
		.proportion {
			position: absolute;
			top: 50%;
			left: 50%;
			transform:translate(-50%,-50%);
			background: #fff;
			border-radius: 50%;
			font-size: 30rpx;
			padding: 20px 10px 10px 10px;
			box-sizing: border-box;
			text-align: center;
			color: #2f80ed;
			font-weight: bold;
		}
	}


	

	
</style>
